<template>
    <div>
      <div class="reg-hed">登录</div>
      <div class="reg-content">
        <img :src="'./static/lyl/tou.png'" alt=""><br>
        <input v-model="phone" type="number" placeholder="请输入手机号">
        <div class="code">
          <input v-model="card" type="number" placeholder="请输入验证码">
          <span @click="sendSign()" v-if="loopTime < 0">获取验证码</span>
          <span v-else>{{loopTime}}s后重试</span>
        </div>
        <button @click="sub">立即登录</button>
      </div>
    </div>
</template>

<script>
  import {Dialog} from 'vant';
  import * as common from "../../../api/common.js";
    export default {
      name: "Register",
      data(){
        return {
          phone: "",
          card: "",
          loopTime: -1,
        }
      },
      mounted(){
        mui.back = function() {
          window.history.go(-1);
        }
      },
      methods:{
        sendSign(){
          let phone = this.phone;

          if (!phone || !/^[1][3-9][0-9]{9}$/.test(phone)) {
            Dialog.alert({
              message: "请输入正确的手机号码"
            });
          } else {
            common.sendCode({ phone: phone }).then(res => {
              console.log(res);
              if (res.status == 200) {
                this.loopTime = 60;
                this.countDown(this.loopTime);
              }
            });
          }
        },

        sub() {
          let [phone, card] = [this.phone, this.card];
          if (!phone || !/^[1][3-9][0-9]{9}$/.test(phone)) {
            Dialog.alert({
              message: "请输入正确的手机号码"
            });
          } else if (!card) {
            Dialog.alert({
              message: "请输入验证码"
            });
          } else {
            common.register({ mobile: phone, code: card }).then(res => {
              console.log("res", res);
              console.log("res.data.user_id",res.data.user_id);

              if (res.status == 200) {
                this.$store.commit('chage',res.data.user_id);
                if (res.data.is_add==1){
                  this.$router.push({ path: "/information" });
                }else{
                  history.go(-1);
                }
              } else {
                Dialog.alert({
                  title: "登录失败",
                  message: res.msg
                });
              }
            });
          }
        },

        countDown(times) {
          if (times > 0 && !isNaN(times)) {
            setTimeout(() => {
              this.loopTime--;
              this.loopTime =
                this.loopTime < 10 ? "0" + this.loopTime : this.loopTime;
              this.countDown(this.loopTime);
            }, 1000);
          } else {
            this.loopTime = -1;
          }
        }
      }
    }
</script>

<style scoped>
  .reg-hed{
    padding: 20px 40px;
    font-size: 36px;
    border-bottom: 2px solid #dcdcdc;
  }
  .reg-content{
    padding: 88px 40px;
    text-align: center;
  }
  .reg-content>img{
    width: 200px;
    height: 200px;
    margin-bottom: 60px;
  }
  .reg-content input{
    width: 100%;
    height: 120px;
    border-bottom: 2px solid #dcdcdc;
    font-size: 32px;
    color: #8c8c8c;
    padding-left: 40px;
    box-sizing: border-box;
  }
  .code{
    position: relative;
  }
  .code span{
    position: absolute;
    right: 0;
    bottom: 30px;
    font-size: 26px;
    color: #884ca4;
    border: 2px solid #884ca4;
    padding: 10px;
    border-radius: 5px;
  }
  .reg-content button{
    width: 480px;
    height: 80px;
    border-radius: 40px;
    background: #884ca4;
    color: #fff;
    font-size: 30px;
    margin-top: 76px;
  }
</style>
